<template>
  <div>
    <a-drawer
      title="开票详情"
      width="1100"
      :maskClosable="false"
      :visible="detailData.show"
      direction="rtl"
      @close="handleClose"
    >
      <div slot="title">
          <span>收款详情</span>
        </div>
      <el-row style="width:1120px;padding-bottom:280px;height:100%;overflow-y:auto">
        <el-col :span="18">
          <el-form
            :model="parames"
            status-icon
            label-position="left"
            ref="parames"
            label-width="94px"
            class="detailForm"
          >
            <el-row style="padding: 0 40px">
                  <el-col :span="24" style="margin-top:15px">
                    <p class="formtitle" style="color:#000;">基本信息</p>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="开票抬头:">
                      <p v-if="parames.invoiceTitle">{{parames.invoiceTitle}}</p>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="地址电话:">
                      <p>{{parames.addressAndTelephone}}</p>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="发票类型:">
                      <p v-if="parames.invoiceType">{{parames.invoiceType.desc}}</p>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="社会信用代码:" >
                      <p>{{parames.creditCode}}</p>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="开户行/账号:">
                      <p>{{parames.depositBankAndAccount}}</p>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="服务公司:">
                      <p>{{parames.serviceCompany}}</p>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="备注信息:">
                      <p>{{parames.remark}}</p>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <p style="margin-top: 20px;color:#000" class="formtitle">开票明细</p>
                  </el-col>
                  <el-col :span="24">
                    <el-table :data="parames.invoicingDetailList" style="width: 100%">
                      <el-table-column prop="contractId" label="合同流水号"></el-table-column>
                      <!-- <el-table-column prop="address" label="服务金额"></el-table-column> -->
                      <!-- <el-table-column prop="address" label="实收金额"></el-table-column> -->
                      <el-table-column prop="invoiceContent" label="开票内容"></el-table-column>

                      <el-table-column prop="applicationAmount" label="开票金额"></el-table-column>
                      <!-- <el-table-column prop="address" label="操作"></el-table-column> -->
                    </el-table>
                  </el-col>
            </el-row>
          </el-form>
        </el-col>
        <el-col :span="5" style="position: fixed;top:80px;right:-10px;width:240px">
          <div class="form-team-box">
            <div style="margin-bottom: 20px">
              <span v-if="parames.reviewStatus">
                <el-button
                  v-if="parames.reviewStatus.name == 'UNREVIEWED'"
                  size="small"
                  icon="el-icon-edit"
                  @click="handleEdit"
                  style="width:200px;text-align: left;margin-bottom:10px"
                >编辑修改内容</el-button>
                <el-button
                  v-if="parames.reviewStatus.name == 'UNREVIEWED' && sureBtn"
                  size="small"
                  @click="handleSure"
                  icon="el-icon-circle-check"
                  style="width:200px;text-align: left;margin-bottom:10px;margin-left:0"
                >确认开票</el-button>
              </span>
              <el-button
                size="small"
                icon="el-icon-delete"
                @click="handleDel"
                style="width:200px;text-align: left;margin-bottom:10px;margin-left:0"
              >删除</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </a-drawer>
    <createdDialog :dialogData="dialogData" @checkOpen="checkOpen"></createdDialog>
  </div>
</template>

<script>
import createdDialog from './addInvoice.vue'  //新建-修改

export default {
  props: ["detailData"],
  data() {
    return {
      loading: false,
      parames: {
        invoicingDetailList: []
      },
      dialogData: { //新建弹窗
        type: '',
        id: '',
        show: false,
      },
      sureBtn: false,
      tableData: []
    };
  },
  mounted() {},
  methods: {
    handleClose() {
      //关闭弹窗
      this.detailData.show = false;
    },
    handleDel () { //删除记录
      this.$post(this.$api.postFinanceInvoicingDel,{ //根据id获取详情数据
        invoicingRecordId: this.detailData.id
      }).then(response => {
        if (response.data.succeed) {
          this.handleClose()
          this.$emit('checkRender')
        }
      })
    },
    handleSure () { //确认开票
      this.$post(this.$api.postFinanceInvoicingConfirm,{ //根据id获取详情数据
        invoicingRecordId: this.detailData.id
      }).then(response => {
        if (response.data.succeed) {
          this.$message({type: 'success', message:'确认成功'})
          this.handleClose()
          this.$emit('checkRender')
        }
      })
    },
    handleEdit () { //修改
      this.dialogData.id = this.detailData.id
      this.dialogData.type = 'edit'
      this.dialogData.title = '编辑开票'
      this.dialogData.show = true
      this.handleClose()
    },
    checkOpen (type) { //重新打开并向上刷新列表数据
      this.detailData.show = true
      if (type == '1') { //是点击了修改保存按钮-需刷新列表数据
        setTimeout(() => {
          this.$emit('checkRender')
        }, 200);
      }
    },
    render () {
      this.loading = true
      this.$post(this.$api.postFinanceInvoicingFind,{ //根据id获取详情
        invoicingRecordId: this.detailData.id
      }).then(response => {
        if (response.data.succeed) {
          this.parames = response.data.data
          this.parames.invoicingDetailList = []
          response.data.data.invoicingDetail.contractId = response.data.data.contractId
          this.parames.invoicingDetailList.push(response.data.data.invoicingDetail)
          this.parames = response.data.data
          setTimeout(() => {
            this.loading = false
          }, 200);
        }
      })
    },
  },
  components: {
    createdDialog
  },
  computed: { //计算属性
    changeDialog () {
      return this.detailData.show
    }
  },
  watch: {
    changeDialog: {
      handler (curVal, oldVal) {
        if (curVal) {
          let buttonLimit = this.$utils.getLocalStorage('buttonlist')  //按钮缓存
          if (buttonLimit.indexOf('k088') !== -1) {
            this.sureBtn = true
          }
          this.render()
        } else {
          
        }
      }
    },
    deep: true
  }
};
</script>

<style scoped>
</style>
